<template>
  <div class="main-table-content">

    <!--搜索栏-->
    <el-form class="search-form" ref="searchFormRef" :model="searchForm" :inline="true" label-width="70">

      <el-form-item label="原文件名" prop="id" label-width="80">
        <el-input v-model="searchForm.originName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
        <el-button icon="Refresh" @click="resetSearch">重置</el-button>
      </el-form-item>

    </el-form>

    <!--按钮组-->
    <div class="fx mgb12">

      <el-upload
          :show-file-list="false"
          :action="option.uploadAction"
          :on-success="handleSuccess"
          :on-error="handleError"
          :limit="1"
          :on-exceed="handleExceed"
          :headers="uploadHeaders"
          :accept="'.jpg,.png'"
          :before-upload="beforeUpload"
          :file-list="option.fileList"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
      >
        <el-button type="primary" icon="Upload">上传文件</el-button>
      </el-upload>

    </div>

    <!--表格-->
    <el-table border highlight-current-row row-key="id" v-loading="option.loading" :data="option.tableData"
              @selection-change="selectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="文件名" prop="name" :show-overflow-tooltip="true" width="100"></el-table-column>
      <el-table-column label="原始文件名" prop="originName" :show-overflow-tooltip="true" width="400"></el-table-column>
      <el-table-column label="地址" prop="uri" width="400">
        <template #default="scope">
          <el-button link type="primary" @click="preview(scope.row)">{{ scope.row.uri }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="上传类型" prop="btype" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="文件类型" prop="fileType" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="上传人ID" prop="uploadUserId" width="170"></el-table-column>
      <el-table-column label="上传时间" prop="ct" width="170"></el-table-column>

    </el-table>

    <!--分页-->
    <div class="fxEnd">
      <el-pagination
          class="mgt8"
          small
          background
          :total="option.totalRow"
          :page-sizes="option.pageSizes"
          v-model:current-page="searchForm.pageNumber"
          v-model:page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="searchData"
          @current-change="searchData"
      />
    </div>

    <!-- 预览图片-->
    <!--Dialog-->
    <el-dialog title="预览图片" v-model="option.openDialog" width="680" :close-on-click-modal="false"
               draggable append-to-body destroy-on-close>
      <el-image :src="option.previewSrc"></el-image>
      <template #footer>
        <el-button @click="()=>{option.openDialog=false}">取 消</el-button>
      </template>

    </el-dialog>

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {apiFilePage} from "@/api/system";
import {ElMessage} from 'element-plus'
import {getAccessToken} from "@/common/utils/cache";

const {proxy} = getCurrentInstance();
const baseUrl = import.meta.env.VITE_UPLOAD_URL;

console.log("  baseUrl ", baseUrl)
const uploadHeaders = {
  'Token': getAccessToken(),
  'bType': 'managerUpload',
}

let optionKey = {
  loading: false,
  dialogType: "",
  dialogTitle: "",
  previewSrc: "",
  openDialog: false,
  tableData: [],
  selectIds: [],
  selectNames: [],
  pageSizes: [1, 10, 20, 50, 100],
  totalRow: 0,
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
  fileList: [],
  uploadAction: baseUrl + '/manage/file/uploadImgFile',
}

let searchKey = {
  pageNumber: 1,
  pageSize: 10,
  originName: '',
}


const searchForm = ref(searchKey)
const option = ref(optionKey);
const handleSuccess = (res, file, fileList) => {

  if (res.code === 200) {
    ElMessage.success('上传成功');
    searchData()
  } else {
    ElMessage.error(res.message);
  }
  fileList.push(file);
  // 在这里可以处理上传成功后的操作

};

const handleError = (error, file, fileList) => {
  console.error('上传失败', error);
  // 在这里可以处理上传失败后的操作
};

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning('上传文件错误，最多只能上传一个文件');
};

const beforeUpload = (file) => {
  // 校验文件类型和大小
  if (!/(\.jpg|\.png)$/.test(file.name) || file.size > 5 * 1024 * 1024) {
    ElMessage.error('只能上传jpg和png格式的文件，且文件大小不得超过5MB');
    return false;
  }
  return true;
};

const handlePreview = (file) => {
  // 在这里可以预览文件
  console.log('预览文件', file);
};

const handleRemove = (file, fileList) => {
  // 文件移除时的操作
  console.log('移除文件', file);
};


//预览
function preview(row) {
  option.value.previewSrc = "";
  option.value.previewSrc = import.meta.env.VITE_IMG_URL + row.uri;
  option.value.openDialog = true
}

function resetSearch() {
  proxy.$refs["searchFormRef"].resetFields();
  searchData()
}

//页面加载完成回调
onMounted(() => {

  searchData()

})

function selectionChange(rows) {
  option.value.selectIds = rows.map(item => item.id);
  option.value.selectNames = rows.map(item => item.account);
}

//搜索数据
function searchData() {
  option.value.loading = true;
  apiFilePage(searchForm.value).then(res => {
    let {totalRow, records, pageNumber, pageSize} = res.data;
    option.value.loading = false;
    option.value.totalRow = totalRow * 1
    option.value.tableData = records
    searchForm.value.pageNumber = pageNumber * 1
    searchForm.value.pageSize = pageSize * 1
  })
}


</script>

<style scoped lang="less">

</style>